<template>
	<view class="product">
		<navBar title="添加商品"></navBar>
		<view class="goods_image">
			<view class="title flex_r_between">
				<view>上传商品图</view>
				<view>{{image.length}}/9</view>
			</view>
			<view class="images_list flex_center">
				<view class="image_box" v-for="(item,index) in image" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<view class="delete_icon" @click="onDeleteImage(index)">
						<u-icon name="close-circle-fill" size="36rpx" color="#FD2A53"></u-icon>
					</view>
				</view>
				<view class="add flex_r_around" @click="chooseImages" v-if="image.length < 9">
					<uni-icons type="plusempty" color="#666666" size="24"></uni-icons>
				</view>
			</view>
			<view class="goods_input flex_center">
				<text>商品名称</text>
				<input type="text" placeholder="请输入商品名称" placeholder-class="input-placeholder" v-model="name" />
			</view>
			<view class="goods_input flex_center">
				<text>商品价格</text>
				<input type="digit" placeholder="请输入商品价格" placeholder-class="input-placeholder" v-model="price"
					@input="checkPrice" />
			</view>
			<view class="tag_title">商品类别</view>
			<view class="category_name flex_r_between">
				<view class="item flex_r_around" @click="show = true">
					<view :id="category_pname ? '' : 'no_have'">
						{{ category_pname || '请选择' }}
					</view>
					<uni-icons type="down" size="20" color="#131313"></uni-icons>
				</view>
				<view class="item flex_r_around" @click="show = true">
					<view :id="category_name ? '' : 'no_have'">
						{{ category_name || '请选择' }}
					</view>
					<uni-icons type="down" size="20" color="#131313"></uni-icons>
				</view>
			</view>

			<view class="tag_title">二级导航</view>
			<view class="grid_nav">
				<u-grid :border="false" :col="4">
					<u-grid-item v-for="(item,index) in store_tab_nav" :key="index" @click="omChooseStoreTabNav(item)">
						<view class="tags_item flex_r_around" :id="tab_nav.indexOf(item.id) > -1 ? 'select' : ''">
							<text>{{ item.name }}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="tag_title">快递类型</view>
			<view class="category_name flex_r_between">
				<view class="item flex_r_around" @click="show_trans = true" id="item">
					<view :id="express_type ? '' : 'no_have'">
						{{
							express_type  == 1 ? '到店使用'
							: express_type  == 2 ? '送货上门'
							: express_type  == 3 ? '快递邮寄'
							: '请选择'
						}}
					</view>
					<uni-icons type="down" size="20" color="#131313"></uni-icons>
				</view>
			</view>
			<!-- <view class="goods_input flex_center">
				<input style="text-align: left;" type="text" placeholder="填写到店地址" placeholder-class="input-placeholder" v-model="price" />
			</view> -->
			
			
			<view class="tag_title">商品介绍</view>
			<view class="textarea">
				<textarea maxlength="500" placeholder-class="input-placeholder" placeholder="请输入您的商品介绍"
					v-model="content"></textarea>
				<view class="text_length flex_r_between">
					<text></text>
					<text>{{content.length}}/500</text>
				</view>
			</view>
			<view class="title flex_r_between">
				<view>产品详情图</view>
				<view>{{content_images.length}}/10</view>
			</view>
			<view class="images_list flex_center">
				<view class="image_box" v-for="(item,index) in content_images" :key="index">
					<image :src="item" mode="aspectFill"></image>
					<view class="delete_icon" @click="onDeleteContent(index)">
						<u-icon name="close-circle-fill" size="36rpx" color="#FD2A53"></u-icon>
					</view>
				</view>
				<view class="add flex_r_around" @click="chooseContent" v-if="content_images.length < 10">
					<uni-icons type="plusempty" color="#666666" size="24"></uni-icons>
				</view>
			</view>
			<view class="btn" @click="onSubmit">提交审核</view>
		</view>


		<u-picker keyName="name" :show="show" ref="uPicker" :columns="columns" @cancel="show = false"
			@change="onColumnsChange" @confirm="onColumnsComfirm"></u-picker>

		<u-action-sheet :actions="list" title="" description="请选择快递类型" cancelText="取消" round="24rpx" :show="show_trans"
			@cancel="show_trans = false" @close="show_trans = false" @select="onTrans"></u-action-sheet>

		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue';
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		components: {
			navBar,
			WCompress,
		},
		data() {
			return {
				id: 0,
				status: 0,
				image: [],
				name: '',
				price: '',
				category_pid: 0,
				category_pname: '',
				category_id: 0,
				category_name: '',
				// 支持快递:1=到店,2=送货上门,3=快递邮寄
				express_type: 0,
				// 产品分类
				columns: [
					[],
					[]
				],
				// 分类储存区
				storeType: [],
				content: '',
				content_images: [],
				kefu: 2,

				show: false,

				show_trans: false,

				list: [
					
				],
				
				store_tab_nav: [],
				tab_nav: [],
			}
		},
		methods: {
			// 选择商品图片
			chooseImages() {
				this.$native.authorize('photos');
				var count = 1;
				uni.chooseImage({
					count: count,
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}`,
							events: {
								getImage: (data) => {
									this.image.push(data.src);
								}
							}
						});
						// file.tempFilePaths.forEach(element => {
						// 	this.$refs.wCompress.start(element, {
						// 		pixels: 2000000, // 最大分辨率，默认二百万
						// 		quality: 0.6, // 压缩质量，默认0.8
						// 		type: 'png', // 图片类型，默认jpg
						// 		// base64: false, // 是否返回base64，默认false，非H5有效
						// 	}).then(url=>{
						// 		this.$upload(url, {
						// 			type: 'picture'
						// 		}).then(res => {
						// 			if (res.status == 2 || res.status == 1) {
						// 				this.image.push(res.result.url)
						// 			} else {
						// 				this.$util.msg(res.msg)
						// 			}
						// 		})
						// 	})

						// })
					},
					fail: (err) => {
						// this.$util.msg(`${err.errMsg}----${err.errCode}`);
					}
				})
			},

			onDeleteImage(index) {
				this.image.splice(index, 1);
			},

			chooseContent() {
				this.$native.authorize('photos');
				var count = 10 - this.content_images.length;
				uni.chooseImage({
					count: count,
					success: (file) => {
						file.tempFilePaths.forEach(element => {
							// uni.navigateTo({
							// 	url: `/pages/index/cropper?src=${element}`,
							// 	events: {
							// 		getImage: function(data) {
							// 			console.log(data,'参数')
							// 		}
							// 	}
							// });
							this.$refs.wCompress.start(element, {
								pixels: 2000000, // 最大分辨率，默认二百万
								quality: 1, // 压缩质量，默认0.8
								type: 'png', // 图片类型，默认jpg
								// base64: false, // 是否返回base64，默认false，非H5有效
							}).then(url => {
								this.$upload(url, {
									type: 'picture'
								}).then(res => {
									if (res.status == 2 || res.status == 1) {
										this.content_images.push(res.result.url);
									} else {
										this.$util.msg(res.msg);
									}
								});
							});

						})

					}
				})
			},

			onDeleteContent(index) {
				this.content_images.splice(index, 1)
			},

			getProductTags() {
				this.$get('/category/getGoodsType').then(res => {
					this.storeType = res.data;
					res.data.forEach((element) => {
						this.columns[0].push({
							"name": element.name,
							"pid": element.pid,
							"id": element.id,
						});
					})
					this.columns[1] = res.data[0].child;
				})
			},

			onColumnsComfirm(e) {
				if (this.status != 0 && this.status != 3) {
					this.show = false;
					return this.$util.msg('当前无法修改类别');
				}
				this.category_pname = e.value[0].name;
				this.category_name = e.value[1].name;
				this.category_pid = e.value[0].id;
				this.category_id = e.value[1].id;
				this.kefu = e.value[1].kefu;
				this.show = false;
				this.onInitExpress();
			},

			onColumnsChange(e) {
				if (e.columnIndex == 0) {
					var picker = this.$refs.uPicker;
					picker.setColumnValues(1, this.storeType[e.index].child)
				}
			},

			onTrans(e) {
				this.express_type = e.express_type;
			},

			onSubmit() {

				if (!this.name) {
					return this.$util.msg('请输入商品名称')
				}

				if (!this.image.length) {
					return this.$util.msg('请添加商品图片')
				}

				if (!this.content_images.length) {
					return this.$util.msg('请添加商品详情图')
				}

				if (!this.category_id) {
					return this.$util.msg('请添加商品分类')
				}

				if (!this.price) {
					return this.$util.msg('请添加商品价格')
				}

				if (!this.content) {
					return this.$util.msg('请添加商品描述')
				}

				if (!this.express_type) {
					return this.$util.msg('请选择快递类型')
				}
				
				var tab_nav = this.tab_nav.join(',');
				this.$post('/store_goods/saveGoods', {
					"name": this.name,
					"goods_image": this.image.join(','),
					"category_pid": this.category_pid,
					"category_id": this.category_id,
					"price": this.price,
					"profile": this.content,
					"expressage": this.kefu == 1 ? 2 : 1,
					"to_store": this.kefu == 1 ? 1 : 2,
					"content": this.content,
					"id": this.id,
					"content_images": this.content_images.join(','),
					"kefu": this.kefu,
					"express_type": this.express_type,
					"tab_nav": tab_nav
				}).then(res => {
					this.$util.msg(res.msg);
					this.$util.back();
				})
			},

			// 限制两位小数
			checkPrice(e) {
				let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.price = num;
				});
			},

			getStoreTabNav(){
				this.$post('/store_goods/getStoreTabNav').then(res=>{
					this.store_tab_nav = res.data;
				})
			},
			
			omChooseStoreTabNav(e){
				var index = this.tab_nav.indexOf(e.id);
				
				if(index == -1){
					this.tab_nav.push(e.id)
				}else {
					this.tab_nav.splice(index,1)
				}
				
			},
			
			onInitExpress(){
				// var kefu = uni.getStorageSync('store').kefu;
				
				this.list = [];
				if(this.kefu == 1){
					this.list.push({
						name: '到店使用',
						express_type: 1,
					});
					this.list.push({
						name: '送货上门',
						express_type: 2,
					});
				}else {
					this.list.push({
						name: '快递邮寄',
						express_type: 3,
					})
				}
			}


		},

		onLoad(option) {
			this.getProductTags();
			this.getStoreTabNav();
			this.onInitExpress();
			if (option.data) {
				var data = JSON.parse(option.data)
				this.id = data.id;
				this.image = data.goods_image;
				this.content_images = data.content_images;
				this.name = data.name;
				this.price = data.price;
				this.category_pid = data.category_pid;
				this.category_pname = data.p_category_name;
				this.category_id = data.category_id;
				this.category_name = data.category_name;
				this.content = data.content;
				this.status = data.status;
				this.kefu = data.kefu;
				this.express_type = data.express_type;
				if(data.tab_nav){
					var list = data.tab_nav.split(',');
					list.forEach(element=>{
						this.tab_nav.push(Number(element));
					})
				}
			}
		},

	}
</script>

<style scoped lang="less">
	.product {
		padding: 32rpx 32rpx 32rpx;
		background: #FFFFFF;
		min-height: 100vh;
	}

	.goods_image {
		.title {
			margin-bottom: 32rpx;

			view {
				font-weight: 500;
				font-size: 32rpx;
				color: #131313;
			}
		}

		.images_list {
			flex-wrap: wrap;

			.add {
				width: 216rpx;
				height: 216rpx;
				background: #F8F8F8;
				border-radius: 24rpx;
				margin: 0 8rpx;
			}

			.image_box {
				position: relative;
				width: 210rpx;
				height: 210rpx;
				margin: 0 8rpx 16rpx 8rpx;

				image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 24rpx;
				}

				.delete_icon {
					position: absolute;
					right: 12rpx;
					top: 12rpx;
				}
			}
		}
	}

	.goods_input {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin-top: 32rpx;
		padding: 0 32rpx;

		text {
			font-size: 32rpx;
			color: #131313;
			margin-right: 10rpx;
		}

		input {
			flex: 1;
			text-align: right;
			font-size: 32rpx;
			color: #131313;
		}
	}

	.tag_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #131313;
		margin-top: 32rpx;
	}

	.category_name {
		margin: 32rpx 0;

		.item {
			width: 328rpx;
			height: 100rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 0 32rpx;

			view {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}

			#no_have {
				color: #999999;
			}
		}


		#item {
			width: 100%;
		}
	}

	.textarea {
		margin: 32rpx 0;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 28rpx 32rpx;

		textarea {
			height: 240rpx;
		}

		.text_length {
			text {
				font-size: 32rpx;
				color: #999999;
			}

		}
	}

	.grid_nav {
		.tags_item {
			width: 144rpx;
			height: 56rpx;
			background: #F7F7F7;
			border-radius: 8rpx;
			margin-top: 24rpx;
			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #131313;
				line-height: 34rpx;
			}
		}
		
		#select {
			background: #FFEAEE;
			text {
				color: #FD2A53;
			}
		}
	}


	.btn {
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		margin-top: 72rpx;
	}
</style>